<template lang="">
    <div class="list">
        <div class="list-item" v-for="(item,index) in text" :key="index">
            {{item}}
        </div>
    </div>
</template>
<script>
    export default {
        name: 'FillCharts',
        props: ['item'],
        data() {
            return {
                text: []
            }
        },
        watch: {
            item(newValue) {
                this.text = []
                let option = newValue.option
                for (let item in option) {
                    console.log('item', item);
                    for (let i = 0; i < option[item].value; i++) {
                        this.text.push(option[item].name)
                    }
                }
            }
        },
        mounted() {
            console.log('Fill', this.item);
            let option = this.item.option
            for (let item in option) {
                console.log('item', item);
                for (let i = 0; i < option[item].value; i++) {
                    this.text.push(option[item].name)
                }
            }
            console.log('FillText', this.text);
        },
    }
</script>
<style scoped>
    .list {
        height: 280px;
        overflow: auto;
        margin: 0px 50px;
    }

    .list-item:first-of-type {
        border-top: 1px solid #DCDFE6;
    }

    .list-item {
        padding: 10px;
        height: 30px;
        line-height: 30px;
        border-bottom: 1px solid #DCDFE6;
    }
</style>